<template>
  <div
    class="exhibits-box jy-style-height"
    id="exhibits-box-id"
    :style="{
      background: `url(${publicUrls + 'free/style9/publicStyle9Bg.png' + '?imageView2/3/format/webp'})`,
    }"
  >
    <div class="top-box">
      <div class="back-box" @click="blankHome">
        <div class="line-box"></div>
        <div class="circle-box"></div>
        <p class="back-text">返回</p>
      </div>
      <div class="title"></div>
      <div class="screen-layout"></div>
    </div>

    <div class="center-box">
      <div
        class="exhibits-bg"
        :style="{
          background: `url(${publicUrls + 'free/style9/exhibitsBg.png' + '?imageView2/3/format/webp'})`,
        }"
      >
        <scrollBox
          color="rgba(50, 43, 37, 1)"
          v-if="scrollheight && !loading"
          :byid="986276"
          :width="getScrollHeight"
          :scroll-src="publicUrls + 'free/style9/scrollIcon.png'"
        >
          <template #solidBorderCon>
            <div class="research-content">
              <div class="research-name">{{ info.name }}</div>
              <div class="info-auth">
                <div class="auth-content">
                  <div class="auth-type" v-if="info.typeId">
                    {{
                      info.typeId == 401792425939013
                        ? '课题研究'
                        : info.typeId == 401792277585989
                        ? '出版刊物'
                        : '论文论著'
                    }}
                  </div>
                  <div class="left-title-box" v-if="info.author">
                    <span class="left-title-box-title1">作者</span>
                    <span class="left-title-box-title2">{{ info.author }}</span>
                  </div>
                  <div class="left-title-box" v-if="info.publisher">
                    <span class="left-title-box-title1 left-title-box-title1-r">出版社</span>
                    <span class="left-title-box-title2">{{ info.publisher }}</span>
                  </div>
                </div>
                <div class="right-btn" v-if="!store.isMobileType">
                  <div class="auth-right">
                    <div @click="AddLikes" class="shear-right">
                      <i class="doorIcon">&#xe659;</i>
                      <span>{{ info.isLike ? '已点赞' : '点赞' }}</span>
                    </div>
                  </div>
                  <t-popup content="" placement="bottom" attach="share" v-if="!store.isMobileType">
                    <template #content>
                      <share @shearType="shearType" />
                    </template>
                    <div class="shear-right" id="share">
                      <i class="doorIcon">&#xe647;</i>
                      <span>分享</span>
                    </div>
                  </t-popup>
                </div>
              </div>
              <div class="line"></div>
              <div
                class="detail-content"
                v-if="info.content || source || (info.data && info.data?.length > 0) || info.url"
              >
                <div v-if="info.content" class="info-content" v-html="info.content"></div>
                <div class="pdf-box" v-if="source">
                  <div class="pdf-heard">
                    <span class="heard-title">{{ title }}</span>
                    <div class="heard-right">
                      <t-icon
                        v-if="isMobileType"
                        @click="setFullScreen"
                        name="fullscreen"
                        style="color: #fff; cursor: pointer"
                      >
                      </t-icon>
                    </div>
                  </div>
                  <div class="pdf-scroll" id="pdfCodeID">
                    <vue-pdf-embed
                      class="vue-pdf-embed"
                      :source="source"
                      :style="{ width: level + '%', height: 'auto' }"
                    />
                  </div>
                </div>
                <div class="downLoad-parent" v-if="info.data && info.data?.length > 0">
                  <p class="resources-url">附件资源</p>
                  <t-row :gutter="25">
                    <t-col :span="4" v-for="(item, index) in info.data" :key="index">
                      <div class="downLoad-box">
                        <i v-if="Number(getimgUrl(item.url)) === 1" class="iconfonts"> &#xe678; </i>
                        <i v-if="Number(getimgUrl(item.url)) === 2" class="iconfonts"> &#xe67a; </i>
                        <i v-if="Number(getimgUrl(item.url)) === 3" class="iconfonts"> &#xe676; </i>
                        <i v-if="Number(getimgUrl(item.url)) === 4" class="iconfonts"> &#xe676; </i>
                        <i v-if="Number(getimgUrl(item.url)) === 5" class="iconfonts"> &#xe679; </i>
                        <i v-if="Number(getimgUrl(item.url)) === 6" class="iconfonts"> &#xe677; </i>
                        <i v-if="Number(getimgUrl(item.url)) === 7" class="iconfonts"> &#xe675; </i>
                        <!-- <img :src="Number(getimgUrl(item.url))" alt="" /> -->
                        <div class="downLoad-right">
                          <div class="downLoad-right-child">
                            <t-popup :content="item.name" attach="#myPopup-resear-406">
                              <p class="right-title1">{{ item.name }}</p>
                            </t-popup>
                            <div class="right-title2">({{ (item.size / 1048576).toFixed(1) }}M)</div>
                          </div>
                          <a target="_blank" :href="urls + item.url" class="right-title3" download>下载</a>
                          <!-- <span class="right-title3"></span> -->
                        </div>
                      </div>
                    </t-col>
                  </t-row>
                </div>
                <div class="resources-box" v-if="info.url">
                  <p class="resources-url">原文链接</p>
                  <a :href="info.url" target="blank" class="resources-url1">
                    {{ info.url }}
                  </a>
                </div>
              </div>
            </div>
          </template>
          <template #solidBorderEx>
            <div class="solidBorder-child"></div>
          </template>
        </scrollBox>
      </div>
    </div>
    <div class="content-door">
      <i class="iconfonts">&#xe6dd;</i>
      <span>永不落幕的展览与展示平台</span>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'style9',
});
</script>
<script lang="ts" setup>
import { getHeardToken } from '@/api/utils';
import { publicUrls } from '@/utils/minxin';
import FooterHome from '../components/footerHome.vue';
import RightMenu from '../components/rightMenu.vue';
import { toQQzone, toQQ, toWeibo, toWechat } from '@/utils/shear';
import { AddLike } from '@/api/door/door';
import { urls } from '@/utils/request/upload';
import VuePdfEmbed from 'vue-pdf-embed';
import { investigationDetail } from '@/api/investigation/investigation';
import { ref, onActivated, defineComponent, onMounted, computed, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useProjectStore } from '@/store';
import scrollBox from '../scrollBox.vue';
import share from '@/components/shear/shear.vue';
const scrollheight = ref();
const scrollNumber = ref(0);
const scrollContainers = ref(); //滚动盒子元素
const heartbeat = ref(0); //页面心跳值
const visibleMessage1 = ref(false); //登录提示
const FullScreen = ref(false);
const loading = ref(false);
const level = ref(100);
const store = useProjectStore();
const title = ref('');
const router = useRouter();
const route = useRoute();
const source = ref('');
const info = ref({
  author: '',
  content: '',
  data: [],
  id: 0,
  name: '',
  pdfData: [],
  publisher: '',
  typeId: 0,
  url: '',
  isLike: {},
});
const isMobileType = ref(true);
const initWap = () => {
  const isMobile = navigator.userAgent.match(
    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i,
  );

  if (isMobile) {
    isMobileType.value = false;
  }
};
initWap();
const init = async () => {
  try {
    let res = await investigationDetail(Number(route.query.id));
    source.value = '';
    title.value = '';
    if (res.data.pdfData.length !== 0) {
      source.value = res.data.pdfData.length > 0 ? urls + res.data.pdfData[0].url : '';
      title.value = res.data.pdfData[0].name;
      console.log(source.value, 'sourcesourcesource');
    }
    //res.data
    info.value = res.data;
  } catch {}
};
init();

onActivated(() => {
  // scrollContainers.value.scrollTop = 0;
  loading.value = true;
  nextTick(() => {
    loading.value = false;
  });
  scrollNumber.value = 0;
  init();
});
let viewportheight = window.innerHeight;
scrollheight.value = (viewportheight / 900) * 558;

const getScrollHeight = computed(() => {
  let rootNode = document.documentElement;

  // 获取计算后的样式
  let computedStyle = window.getComputedStyle(rootNode);

  // 读取字体大小（注意这里返回的可能是一个包含单位的字符串，如"16px"）
  let fontSize = computedStyle.fontSize;

  // 如果你需要一个数字值（不带单位）进行计算，你可能需要解析这个字符串
  // 例如，使用正则表达式或split()方法去除单位，并将结果转换为数字
  let fontSizeNumber = parseFloat(fontSize.replace(/[^0-9.-]/g, ''));
  let heights = (fontSizeNumber / 144) * 480;
  return heights;
});

const Movetop = () => {
  // // scrollContainers.value.scrollTop = 0;
  // scrollNumber.value = 0;
};
const handleScroll = () => {
  // console.log(scrollContainers.value.scrollTop);
};
const scrollItem = (event) => {
  // scrollNumber.value = scrollContainers.value.scrollTop;
};
const AddLikes = () => {
  let token = getHeardToken();
  if (!token) {
    store.loginModeShow = true;
    // visibleMessage1.value = true;
    return;
  }
  AddLike({
    refType: 7,
    refId: info.value.id,
  }).then((res) => {
    info.value.isLike = res.data;
  });
};
const shearType = (e: number) => {
  let url = window.location.href;
  let title = info.value.name;
  switch (e) {
    case 1:
      toQQzone(url, title);
      break;
    case 2:
      toQQ(url, title);
      break;
    case 3:
      toWeibo(url, title);
      break;
    default:
      toWechat(url, title);
      break;
  }
};
const addLevel = (e: number) => {
  if (e === 1) {
    if (level.value == 20) {
    } else {
      level.value = level.value - 20;
    }
  } else {
    level.value = level.value + 20;
  }
};
const setFullScreen = () => {
  let element: any = document.getElementById('pdfCodeID'); //需要全屏容器的id
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  } else if (element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if (element.msRequestFullscreen) {
    element.msRequestFullscreen();
  }
};
const linkUrl = (url: any) => {
  window.open(url, '_blank');
};
const closeClick = () => {
  //取消
  visibleMessage1.value = false;
};
const pathSubmitClick = () => {
  //确认登录

  router.push({
    path: '/login',
  });
  // window.location.href = redirectUrl;
  // outLogin(redirectUrl);
};
const getimgUrl = (e: string): string => {
  if (e.indexOf('doc') !== -1) {
    return '1';
  } else if (e.indexOf('.mp4') !== -1) {
    return '2';
  } else if (e.indexOf('.rar') !== -1) {
    return '3';
  } else if (e.indexOf('.ppt') !== -1) {
    return '5';
  } else if (e.indexOf('.execl') !== -1) {
    return '6';
  } else if (e.indexOf('.mp3') !== -1) {
    return '7';
  } else {
    return '4';
  }
};
const blankHome = () => {
  router.push({ name: route.meta.loopType ? 'templateResearchesLoop' : 'templateResearches' });
};
// import { publicUrls } from '@/utils/minxin';
// import { commonDataStore } from '@/store';
// const commonStore = commonDataStore();
// import { useRouter, useRoute } from 'vue-router';
// const router = useRouter();
// const route = useRoute();
</script>

<style lang="less" scoped>
.exhibits-box {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  padding: 40px 0 40px 0;
}
.top-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 60px;
}
.back-box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.line-box {
  flex-shrink: 0;
  width: 140px;
  height: 1px;
  background: #898172;
}
.circle-box {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #898172;
}
.back-text {
  flex-shrink: 0;
  color: #898172;
  font-family: 'SourceHanSerifCN';
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
  line-height: 160%; /* 28.8px */
  margin-left: 2px;
}
.title {
  width: 1px;
  height: 56px;
}
.screen-layout {
  flex-shrink: 0;
  width: 108px;
  height: 46px;
}
.center-box {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  padding: 0 60px;
  margin-top: 24px;
}
.exhibits-bg {
  position: relative;
  width: 100%;
  height: 740px;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  padding: 80px 138px;
}
.research-content {
  width: 100%;
  // overflow: auto;
  // scrollbar-width: none;
  // &::-webkit-scrollbar {
  //   display: none;
  // }
}
.research-name {
  color: #706355;
  text-align: center;
  font-family: 'SourceHanSerifCN';
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: 52px; /* 185.714% */
}
.info-auth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 36px;
}
.auth-content {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.auth-type {
  width: 80px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #faeedc;
  color: #706355;
  text-align: center;
  font-family: 'Microsoft YaHei';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 150% */
}
.left-title-box {
  margin-left: 32px;
  max-width: 360px;
  display: flex;
}
.left-title-box-title1 {
  white-space: nowrap;
  color: #333;
  font-family: 'PingFang SC';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  opacity: 0.5;
}
.left-title-box-title1-r {
  margin-left: 8px;
}
.left-title-box-title2 {
  color: #333;
  font-family: 'PingFang SC';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin-left: 8px;
}
.right-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.auth-right {
  margin-right: 12px;
}
.shear-right {
  cursor: pointer;
  width: 68px;
  height: 32px;
  flex-shrink: 0;
  border: 1px solid #706355;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #706355;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  .doorIcon {
    margin-right: 6px;
  }
}
.line {
  width: 100%;
  height: 1px;
  background: #b1a693;
  margin-top: 20px;
}
.detail-content {
  width: 100%;
  height: 410px;

  margin-top: 30px;
}
.info-content {
  width: 100%;
  ::v-deep p {
    color: #333;
    text-align: justify;
    font-family: 'Microsoft YaHei';
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 188.235% */
  }
}
::v-deep .null-scroll {
  padding: 0 !important;
}
.pdf-box {
  width: 100%;
  height: 1190px;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(177, 166, 147, 0.3);
}
.pdf-heard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  background: rgba(57, 55, 50, 1);
  box-shadow: 0px 1.84px 1.84px 0px rgba(28, 31, 34, 0.4);
  padding: 0 38px;
}
.heard-title {
  font-family: PingFang SC;
  font-size: 16px;
  line-height: 32px;
  color: #fff;
}

.pdf-scroll {
  flex: 1;
  width: 100%;
  padding: 38px;

  background: #2a2826;
  overflow: scroll;
}
.pdf-scroll::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.pdf-scroll::-webkit-scrollbar-thumb {
  background: #757371;
  border-radius: 6px;
  // display: none;
}
.pdf-scroll::-webkit-scrollbar-track {
  background: #4c4b46;
  border-radius: 6px;
}
.vue-pdf-embed {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 auto;

  div {
    width: 100%;
  }
}
.downLoad-parent {
  margin-top: 50px;
}
.resources-url {
  color: #706355;
  font-family: 'PingFang SC' !important;
  font-size: 18px !important;
  font-style: normal;
  font-weight: 500 !important;
  line-height: 28px; /* 155.556% */
  text-indent: 0% !important;
}
.downLoad-box {
  width: 100%;
  border-radius: 3px;
  border: 1px solid #b1a693;
  display: flex;
  padding: 24px 18px;
  .iconfonts {
    font-size: 56px;
    line-height: 56px;
    color: #706355;
  }
}
.downLoad-right {
  width: 100%;
}
.downLoad-right-child {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.right-title1 {
  color: #706355;
  font-family: 'PingFang SC';
  font-size: 16px;
  line-height: 24px;
  width: calc(100% - 58px - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 0 !important;
}
.right-title2 {
  min-width: 50px;
  color: #706355;
  font-family: 'PingFang SC';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
  opacity: 0.5;
  margin-left: 8px;
  flex-shrink: 0;
}
.right-title3 {
  color: #706355;
  font-family: 'PingFang SC';
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  border-bottom: 1px solid #706355;
}
.resources-box {
  margin-top: 50px;
}
.resources-url1 {
  display: block;
  margin-top: 16px;
  color: #706355;
  font-family: 'PingFang SC';
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 133.333% */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}
.content-door {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  opacity: 0.5;
  .iconfonts {
    font-size: 26px;
    color: #fff;
    margin-bottom: 4px;
    line-height: 32px;
  }
  span {
    font-family: PingFang SC;
    font-size: 16px;
    line-height: 32px;
    color: #fff;
    margin-left: 20px;
    padding-bottom: 7px;
  }
}
.solidBorder-child {
  height: 480px;
  width: 2px;
  background-color: #b1a693;
  opacity: 0.6;
}
::v-deep .unit-exbit-null-remarks-info {
  width: 100%;
  max-height: 740px !important;
  // padding: 80px 158px 90px 198px;
  // position: absolute;
  // bottom: 40px;
}
::v-deep .unit-exbi-remarks-info-remarks {
  max-height: 740px !important;
}
::v-deep .solid-box-parent-p {
  top: 50%;
  right: -80px;
  transform: translateY(-50%);
  img {
    width: 22px;
    height: 22px;
    margin-top: 0;
    margin-left: 1px;
  }
}
</style>
